<template>
  <div class="component need-footer">
    <app-header title="舆情工单处理进度" :needBack="true">
      <template slot="right-btn">
        <div class="filter-btn" @click="doFilter">
          <i class="iconfont icon-filter"></i>
          筛选
        </div>
      </template>
    </app-header>
    <filter-view
      v-show="filterOpenState">
    </filter-view>
    <div class="table-content">
      <x-table :full-bordered="true" style="background-color:#fff;">
        <thead>
          <tr>
            <th v-for="(item, index) in thead" :key="index" :width="item.width">{{item.name}}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in tableData" :key="index">
            <td>{{item.statusName}}</td>
            <td>{{item.dealer}}</td>
            <td style="text-align: left;"><router-link class="link" :to="{ name: 'MediaPublicSentimentProgressDetail', query: { id: item.id } }">{{item.title}}</router-link></td>
          </tr>
        </tbody>
      </x-table>
    </div>
    <loading :show="showLoading"></loading>
    <app-footer :active="2"></app-footer>
  </div>
</template>
<script>
import AppHeader from '@/components/common/AppHeader'
import AppFooter from '@/components/common/AppFooter'
import FilterView from '@/components/common/FilterView'
import { Loading, XTable } from 'vux'

const statusList = [
  { id: 1, name: '未派单处理', },
  { id: 2, name: '已派单', },
  { id: 3, name: '待查阅', },
  { id: 4, name: '已查阅', },
  { id: 5, name: '待处理', },
]

const thead = [
  { name: '工单状态', width: '20%' },
  { name: '处理人', width: '20%' },
  { name: '主题', width: '60%' },
]

export default {
  name: "",
  data() {
    return {
      statusList: statusList,
      filterOpenState: false,
      showLoading: false,
      // table
      tableData: [],
      thead: thead,
    }
  },
  methods: {
    doFilter() {
      this.filterOpenState = !this.filterOpenState
    }
  },
  created() {
    this.showLoading = true
    setTimeout(() => {
      this.showLoading = false
      const data = [
        { id: 1, title: '工单1工单1工单1工单1工单1工单1工单1工单1工单1工单1工单1工单1工单1', dealer: 'a君', status: 1 },
        { id: 2, title: '工单2', dealer: 'b君', status: 2 },
        { id: 3, title: '工单3', dealer: 'c君', status: 3 },
        { id: 4, title: '工单4', dealer: 'd君', status: 4 },
        { id: 5, title: '工单5', dealer: 'd君', status: 5 },
      ]
      data.map(item => {
        const target = statusList.find(status => status.id === item.status)
        item.statusName = target ? target.name : '未知'
      })
      this.tableData = data
    }, 500)
  },
  components: {
    AppHeader,
    AppFooter,
    FilterView,
    XTable,
    Loading,
  },
  filters: {
    parseStatus(status) {
      let result = statusList.find(item => item.id === status)
      return result ? result.name : ''
    }
  }
}
</script>
<style lang="less" scoped>
  @import '../../assets/less/default.less';
  .table-content {
    width: 90%;
    margin: auto;
    table {
      font-size: .25rem;
      line-height: .5rem;
    }
  }
  .link {
    color: #333;
    text-decoration: underline;
  }
</style>
